const React = require('react');
const {
  View,
  StyleSheet,
} = require('react-native');
const {
  JDDevice,
  JDText,
  JDRouter,
  JDToast,
  JDButton,
  JDLoadingView,
  JDNativeToast,
} = require('@areslabs/jdreact-core-lib');
const { NavigationBar } = JDRouter;

class JDToastExample extends React.Component {
  state = {
    toast: null,
    toastStyle: null,
    mode: JDToast.MODE.TOAST,
  };

  render() {
    return (
      <View style={styles.wrapper}>
        <NavigationBar Title="Toast" />
        <View style={styles.body}>
            <View><JDText>JDToast: UI Component</JDText></View>
            <JDButton style={styles.btn} onPress={() => { this.setState({
              toast: 'This is a Toast Example',
              toastStyle: null,
              mode: JDToast.MODE.TOAST,
            }) }}>显示Toast</JDButton>

            <JDButton style={styles.btn} onPress={() => { this.setState({
              toast: <JDText style={{color: '#686868'}}>This is a Toast Example</JDText>,
              toastStyle: {backgroundColor: '#FFF', borderWidth: JDDevice.getDpx(1), borderColor: '#848689'},
              mode: JDToast.MODE.TOAST,
            }) }}>显示自定义样式的Toast</JDButton>

            <JDButton style={styles.btn} onPress={() => { this.setState({
              toast: (
                <View style={{width: JDDevice.getRpx(200), height: JDDevice.getRpx(200), justifyContent: 'center', alignItems: 'center', }}>
                  <View style={{marginBottom: JDDevice.getRpx(20)}}><JDLoadingView /></View>
                  <JDText style={{color: '#FFF'}}>数据加载中...</JDText>
                </View>
              ),
              toastStyle: {borderRadius: 8, backgroundColor: 'rgba(0, 0, 0, 0.6)'},
              mode: JDToast.MODE.MODAL,
            }) }}>显示居中的Toast</JDButton>

            <View style={{marginTop: 20}}><JDText>JDNativeToast: Native Module</JDText></View>
            <JDButton style={styles.btn} onPress={() => { JDNativeToast.show('自定义文本', JDNativeToast.SHORT, JDNativeToast.SUCCESS) }}>成功模式</JDButton>
            <JDButton style={styles.btn} onPress={() => { JDNativeToast.show('自定义文本', JDNativeToast.SHORT, JDNativeToast.FAIL) }}>失败模式</JDButton>
            <JDButton style={styles.btn} onPress={() => { JDNativeToast.show('自定义文本', JDNativeToast.SHORT, JDNativeToast.MESSAGE) }}>普通模式</JDButton>
      
            <JDButton style={styles.btn} onPress={() => { JDNativeToast.showMessageGuide('iOS消息提示框') }}>iOS消息提示框</JDButton>

        </View>

        <JDToast show={!!this.state.toast} onHide={this._onHide} style={this.state.toastStyle} mode={this.state.mode}>
          { this.state.toast }
        </JDToast>
      </View>
    );
  }

  _onHide = () => {
    this.setState({
      toast: null,
      toastStyle: null,
      mode: JDToast.TOAST_MODE,
    });
  };
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
  },
  body: {
    flex: 1,
    padding: JDDevice.getRpx(20),
  },
  btn: {
    marginTop: JDDevice.getRpx(20),
  }
});

module.exports = JDToastExample;
